$style: #F65C28;
page{
	background-color: #F9F9F9;
}
#g-list {
	.orderby {
		height: 90rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 30rpx;
		position: sticky;
		top: 0;
		left: 0;
		z-index: 3;
		background-color: #fff;
		.left {
			display: inline-flex;
			align-items: center;
			.item {
				display: flex;
				align-items: center;
				padding: 0 50rpx;
				position: relative;
				& + .item{
					&::before{
						position: absolute;
						content: '';
						width: 1px;
						height: 10rpx;
						background: #CCCCCC;
						left: 0;
						top: 50%;
						transform: translateY(-50%);
					}
				}
				&:first-child{
					padding-left: 0;
				}
				&:last-child{
					padding-right: 0;
				}
				text {
					font-size: 26rpx;
					color: #000;
				}
				.select.active{
					transform: rotate(180deg);
				}
				image {
					display: block;
					width: 12rpx;
					height: 20rpx;
					margin-left: 13rpx;
				}
				&.active {
					text {
						color: $style;
					}
				}
			}
		}
		.right {
			display: inline-flex;
			align-items: center;
			.filt {
				margin-right: 10rpx;
				font-size: 26rpx;
			}
			.layout {
				text {
					font-size: 25rpx;
				}
			}
			.right-icon{
				width: 30rpx;
				height: 23rpx;
			}
		}
	}
	.list {
		padding:24rpx 32rpx;
		.item {
			display: block;
			float: left;
			margin-left:16rpx;
			margin-bottom:16rpx;
			width: 335rpx;
			height: 465rpx;
			border-radius: 8rpx;
			overflow: hidden;
			background-color: #fff;
			// transition: all 0.3s;
			.img {
				width: 100%;
				height: 335rpx;
				// transition: all 0.3s;
				image {
					width: 100%;
					height: 100%;
				}
			}
			.text {
				height: 130rpx;
				padding: 20rpx 26rpx 10rpx;
				// transition: all 0.3s;
				.title {
					width: 100%;
					font-size:28rpx;
					height: 30rpx;
					line-height:30rpx;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
				}
				.bot {
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top:18rpx;
					.price {
						font-size:20rpx;
						color: $style;
						text {
							font-size:32rpx;
							line-height:32rpx;
						}
					}
					.sale {
						font-size:20rpx;
						color: #999;
					}
				}
			}
			&:nth-child(2n + 1) {
				margin-left: 0;
			}
		}
		&.style-line {
			.item {
				width: 100%;
				height: auto;
				margin-left: 0;
				display: flex;
				.img {
					width: 218rpx;
					height: 218rpx;
					flex-shrink: 0;
				}
				.text {
					width: 468rpx;
					.title {
						line-height:40rpx;
						height:80rpx;
						white-space: normal;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
					}
					.bot {
						margin-top:60rpx;
					}
				}
			}
		}
	}
	.my-list1{
		margin-top: 33rpx;
	}
	.mask {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 4;
		background-color: rgba(0, 0, 0, 0.5);
	}
	.filter {
		width: 472rpx;
		height: 100vh;
		position: fixed;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: 5;
		background-color: #fff;
		transform:translateX(100%);
		transition: all .5s; 
		&.active{
			transform:translateX(0);
		}
		.mod {
			width: 100%;
			height:74rpx;
			background-color: #fafafa;
			padding: 0 32rpx;
			line-height: 74rpx;
			font-size:24rpx;
			color: #ccc;
		}
		.sku-item {
			width: 100%;
			padding: 0 32rpx;
			margin-top: 36rpx;
			box-sizing: border-box;
			.title {
				font-size: 28rpx;
				color: #333333;
				line-height: 1;
			}
			.items {
				width: 100%;
				margin-top: 28rpx;
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				&::after{
					width: 126rpx;
					content: '';
				}
				view{
					text-align: center;
					width: 126rpx;
					line-height: 50rpx;
					background: #F5F5F5;
					border-radius: 10rpx;
					margin-bottom: 16rpx;
					font-size: 24rpx;
					color: #666666;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					&.active {
						font-weight: bold;
						background: #FFF6EE;
						color: $style;
						border: 1px solid $style;
					}
				}
			}
		}
		.price-range {
			margin-top:36rpx;
			padding: 0 32rpx;
			.title {
				font-size: 28rpx;
				color: #333333;
				line-height: 1;
			}
			.line {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 25rpx;
				input {
					width: 186rpx;
					height: 50rpx;
					border-radius: 10rpx;
					border: none;
					background: #F5F5F5;
					font-size: 24rpx;
					border: 1px solid #EDEDED;
					padding: 0 18rpx;
					box-sizing: border-box;
				}
				text {
					font-size: 28rpx;
					color: #666666;
				}
			}
		}
		.selected {
			width: 100%;
			margin-top: 36rpx;
			padding: 0 32rpx;
			.title {
				font-size: 24rpx;
				color: #666;
			}
			.items {
				width: 100%;
				overflow: hidden;
				margin-top:10rpx;
				a {
					display: inline-flex;
					align-items: center;
					justify-content: center;
					padding:4rpx;
					margin-top:15rpx;
					margin-right:8rpx;
					width: 153rpx;
					min-width: 153rpx;
					height:64rpx;
					max-width: 153rpx;
					border-radius:4rpx;
					background-color: #ffebeb;
					font-size:24rpx;
					position: relative;
					color: $style;
					text {
						display: block;
						width: 24rpx;
						height: 24rpx;
						position: absolute;
						top: 0;
						right: 0;
						background-color: $style;
						border-radius: 4rpx;
						font-size:16rpx;
						line-height:24rpx;
						text-align: center;
						color: #fff;
					}
					&:nth-child(3n) {
						margin-right: 0;
					}
				}
			}
		}
		.scroll {
			width: 100%;
			height: calc(100vh - 200rpx);
			overflow-y: auto;
		}
		.btns {
			display: flex;
			justify-content: space-between;
			padding: 0 32rpx;
			box-sizing: border-box;
			.btn {
				width: 192rpx;
				line-height: 79rpx;
				text-align: center;
				background: #FFFFFF;
				border-radius: 10rpx;
				border: 1px solid $style;
				&.reset {
					border: 1px solid $style;
					color: $style;
				}
				&.submit {
					background-color: $style;
					color: #fff;
					border: none;
				}
			}
		}
		&.open {
			transform: translateX(0);
		}
	}
}